<template>
  <win-view>
    <div class="desktop" :style="`max-height: ${pageMaxHeight}px;overflow:hidden;padding: 20px;`" @click="currClick=''"  @contextmenu.stop.prevent="btnClick(1,$event)">
      <grid-layout
        :layout.sync="layout"
        :col-num="desktopLayoutSize.row"
        :row-height="desktopLayoutSize.size[1]"
        :is-draggable="true"
        :is-resizable="false"
        :is-mirrored="false"
        :vertical-compact="true"
        :margin="[10, 10]"
        :use-css-transforms="true"
        class="grid-layout"
      >
        <grid-item v-for="item in layout"
          :x="item.x"
          :y="item.y"
          :w="item.w"
          :h="item.h"
          :i="item.i"
          :key="item.i"
          >
            <div :class="['item',iconSize,item.i===currClick?'curr-click':'']" style="width:100%;height:100%;text-align:center" @click.stop="currClick=item.i" @dblclick="btnClick(0,{id:item.i,path:item.path,icon:item.icon,title:item.title})" @contextmenu.stop.prevent="btnClick(2,$event)" v-if="!item.type">
              <div class="img-cover">
                <img :src="item.icon" :alt="item.title" srcset="">
              </div>
              <span class="title" :class="[item.i===currClick?'curr-click-title':'']">{{item.title}}</span>
            </div>
            <home-card class="task-card" v-if="item.type&&taskCard" title="任务提醒">
              <ul slot="content">
                <li class="text-hide" style="width:100%;margin-top:4px;" v-for="(item,index) in taskList" :key="index">{{index+1+'.'}}{{item.title}}</li>
                <a class="look-more" href="javascript:;">查看更多>></a>
              </ul>
            </home-card>
        </grid-item>
      </grid-layout>
    </div>
    
    <e-vue-contextmenu class="right-menu" ref="blockMenu" id="blockMenu">
      <div class="menu-item" @click="btnClick(3,'自定义菜单1')"><img src="@/assets/img/icon_01.png"><span>自定义菜单1</span> </div>
      <div class="menu-item" @click="btnClick(3,'自定义菜单2')"><img src="@/assets/img/icon_02.png"><span>自定义菜单2</span></div>
      <div class="menu-item" @click="btnClick(3,'自定义菜单3')"><img src="@/assets/img/icon_03.png"><span>自定义菜单3</span></div>
      <a-divider />
      <div class="menu-item" @click="btnClick(3,'自定义菜单4')"><img src="@/assets/img/icon_04.png"><span>自定义菜单4</span></div>
      <div class="menu-item" @click="btnClick(3,'自定义菜单5')"><img src="@/assets/img/icon_05.png"><span>自定义菜单5</span></div>
    </e-vue-contextmenu>
    <e-vue-contextmenu class="right-menu" ref="iconMenu" id="iconMenu">
      <div class="menu-item" @click="btnClick(3,'打开')"><img src="@/assets/img/icon_04.png"><span>打开</span></div>
    </e-vue-contextmenu>
  </win-view>
</template>
<script>
import WinView from '@/layouts/WinView'
import VueGridLayout from 'vue-grid-layout';
import HomeCard from '@/components/homeCard/HomeCard'
import {mapState,mapGetters,mapMutations} from 'vuex';
import { formatLayout } from '@/utils/util';

const menus = [
  {title:'事务办理',icon:require('@/assets/img/icon_01.png'),path:'http://www.people.com.cn/'},
  {title:'生产项目',icon:require('@/assets/img/icon_00.png'),path:'http://www.xinhuanet.com/'},
  {title:'系统维护',icon:require('@/assets/img/icon_20.png'),path:'https://www.cctv.com/'},
  {title:'项目管理',icon:require('@/assets/img/icon_13.png'),path:'http://www.cri.cn/'},
  {title:'人力资源',icon:require('@/assets/img/icon_15.png'),path:'http://cn.chinadaily.com.cn/'},
  {title:'预算管理',icon:require('@/assets/img/icon_07.png'),path:'http://www.china.com.cn/'},
  {title:'投资管理',icon:require('@/assets/img/icon_10.png'),path:'http://www.ce.cn/'},
  {title:'综合办公',icon:require('@/assets/img/icon_03.png'),path:'#/window/file/receive'},
  {title:'科研项目',icon:require('@/assets/img/icon_02.png'),path:'https://www.gmw.cn/'},
  {title:'决策分析',icon:require('@/assets/img/icon_21.png'),path:'http://www.cnr.cn/'},
  {title:'报表管理',icon:require('@/assets/img/icon_14.png'),path:'#/window/file/receive'},
  {title:'经营管理',icon:require('@/assets/img/icon_05.png'),path:'#/window/file/receive'},
  {title:'财务管理',icon:require('@/assets/img/icon_08.png'),path:'#/window/file/receive'},
  {title:'总务管理',icon:require('@/assets/img/icon_11.png'),path:'#/window/file/receive'},
  {title:'总经理办公室',icon:require('@/assets/img/icon_18.png'),path:'#/window/file/receive'},
  {title:'综合项目展示',icon:require('@/assets/img/icon_04.png'),path:'#/window/file/receive'},
  {title:'资金计划',icon:require('@/assets/img/icon_22.png'),path:'#/window/file/receive'},
  {title:'系统管理',icon:require('@/assets/img/icon_19.png'),path:'#/window/file/receive'},
  {title:'运营管理',icon:require('@/assets/img/icon_06.png'),path:'#/window/file/receive'},
  {title:'科技管理',icon:require('@/assets/img/icon_09.png'),path:'#/window/file/receive'},
  {title:'安全管理',icon:require('@/assets/img/icon_12.png'),path:'#/window/file/receiver'},
  {title:'BI系统',icon:require('@/assets/img/icon_16.png'),path:'#/window/file/receives'},
  {title:'战略发展',icon:require('@/assets/img/icon_17.png'),path:'#/window/form'},
]

export default {
  data () {
    return {
      layout:[],
      taskList:[
        {title:'本季度末上报某某项目的项目进度'},
        {title:'本季度末上报某某项目的项目进度'},
        {title:'本季度末上报某某项目的项目进度'},
      ],
      statics: false,
      key: 1,
      currClick: '',
      taskCard: true,
      colNum: 0,
    }
  },
  watch: {
    'desktopLayoutSize.row'(){
      this.layout[this.layout.length - 1].x = this.desktopLayoutSize.row-2
    },
    taskCard(){
      if(this.taskCard&&!this.layout[this.layout.length - 1].type){
        this.layout.push({i:23,x:this.desktopLayoutSize.row-2,y:0,w:2,h:6,type:1,static:true},)
      }
      if(!this.taskCard&&this.layout[this.layout.length - 1].type){
        this.layout.splice(-1,1)
      }
    },
    iconSize(){
      this.setSize()
    }
  },
  components: {
    WinView,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    HomeCard,
  },
  computed: {
    ...mapState('setting', [ 'pageMaxHeight', 'iconSize']),
    ...mapGetters('setting', ['desktopLayoutSize']),
  },
  created() {
    this.layout.push({i:23,x:this.desktopLayoutSize.row-2,y:0,w:2,h:6,type:1,static:true},)
  },
  mounted() {
    this.layout = formatLayout(menus)
    this.layout.push({i:23,x:this.desktopLayoutSize.row-2,y:0,w:2,h:6,type:1,static:true},)
    this.setSize()
    window.onresize = ()=>this.setSize();
  },
  methods: {
    ...mapMutations('setting', ['correctPageMaxHeight','correctPageMaxWidth']),
    ...mapMutations('window', ['open']),
    setSize(){
      this.correctPageMaxWidth(window.innerWidth - 60)
      this.correctPageMaxHeight(window.innerHeight - 90)
      if(window.innerWidth<1000){
        this.taskCard = false;
      }else{
        this.taskCard = true;
      }
      this.$nextTick(()=>{
        let itemH = document.getElementsByClassName("item")[0].offsetHeight;
        let colNum = Math.floor((window.innerHeight - 90)/(itemH+10))
        
        if(this.colNum!=colNum){
          this.colNum=colNum
          if(this.colNum>=4){
            let list = this.layout
            list.pop()
            this.layout = formatLayout(list,this.colNum)
            this.layout.push({i:23,x:this.desktopLayoutSize.row-2,y:0,w:2,h:6,type:1,static:true},)
          } 
        }
      })
    },

    btnClick(type, target){
      switch(type){
        case 0:
          this.open(target)
          break;
        case 1: // 右键空白
          this.hideIconMenu();
          this.$refs.blockMenu.showMenu(target)
          break;
        case 2: // 右键 图标
          this.hideBlockMenu();
          this.$refs.iconMenu.showMenu(target)
          break;
        case 3:
          this.$message.info(target)
          this.hideBlockMenu();
          this.hideIconMenu();
          break;
      }
    },
    hideBlockMenu(){
      this.$refs.blockMenu.hideMenu();
    },
    hideIconMenu(){
      this.$refs.iconMenu.hideMenu();
    },
    handlerSql() {
        // 自定义事件
    }
  }
}
</script>
<style lang="less" scoped>
  .desktop{
    .grid-layout{
      /deep/.vue-grid-placeholder {
        background: fade(@primary-color, 80%) !important;
      }
    }
    .item{
      padding: 0px 6px;
      .img-cover{
        width:100%;
        text-align:center;
        display:inline-block;
        padding:12px;
        border-radius: 8px;
        img{
          width: 100%;
        }
      }
      .title{
        width:100%;
        text-align:center;
        color: @base-bg-color;
        display: inline-block;
        border-radius: 18px;
        font-size: 12px;
        background: fade(@title-color, 30%);
      }
    }
    .task-card{
      min-width: 220px;
      min-height: unset !important;
      background: fade(@base-bg-color,12%);
      border: unset !important;
      cursor: default;
      border-radius: 8px;
      /deep/.ant-card-head{
        min-height: 38px;
      }
      /deep/.ant-tabs .ant-tabs-large-bar .ant-tabs-tab{
        padding: 14px 8px;
      }
      /deep/.ant-tabs-nav-container{
        line-height: 0.7;
      }
      /deep/.ant-tabs.ant-tabs-large .ant-tabs-extra-content{
        line-height: 46px;
      }
      /deep/.ant-tabs-extra-content a{
        color: @base-bg-color;
      }
      /deep/.ant-tabs-nav .ant-tabs-tab:hover{
        color: @primary-color;
      }
      /deep/.ant-card-head{
        padding: 0 12px;
      }
      /deep/.ant-card-body{
        padding: 6px 12px 8px;
      }
      ul{
        margin: 0;
        padding: 0;
        list-style: none;
        li{
          cursor: pointer;
          color: @base-bg-color;
        }
        li:hover{
          color: @primary-color;
        }
        .text-hide{
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .look-more{
          margin-top: 6px;
          float: right;
          color: @text-color-second;
        }
      }
    }
    .huge{
      padding: 0px 10px;
      .img-cover{
        padding: 14px;
      }
    }
    .mini{
      padding: 0px 4px;
      .img-cover{
        padding: 12px;
      }
      .title{
        font-size: 10px;
      }
    }
  }
  .curr-click{
    background-color: fade(@primary-color, 18%);
  }
  .curr-click-title{
    color: @primary-color !important;
  }
  .right-menu{
    box-shadow: 0 0 18px @shadow-color;
    border-color: @border-color;
    min-width: 200px;
    font-size: 13px;
    .ant-divider{
      margin-top: 6px;
      margin-bottom: 0;
    }
    .menu-item{

      padding: 6px 12px;
      padding-left: 24px ;
      img{
        width: 18px;
        height: 18px;
        margin-right: 8px;
      }
    }
    .menu-item:hover{
      cursor: pointer;
      background-color: @primary-color;
      color: @base-bg-color;
    }
  }
</style>